import React, { useState } from 'react';
import {
  AppBar,
  Toolbar,
  Typography,
  Button,
  Box,
  Container,
  IconButton,
  useTheme,
  useMediaQuery,
  Avatar,
  Menu,
  MenuItem,
  ListItemIcon
} from '@mui/material';
import {
  Home as HomeIcon,
  Calculate as CalculateIcon,
  Group as GroupIcon,
  Person as PersonIcon,
  Menu as MenuIcon,
  Logout as LogoutIcon,
  Dashboard as DashboardIcon
} from '@mui/icons-material';
import { Link as RouterLink } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
import LoginDialog from './LoginDialog';

function Navbar() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const [loginOpen, setLoginOpen] = useState(false);
  const [userMenu, setUserMenu] = useState(null);
  const { user, logout } = useAuth();

  const navItems = [
    { text: '首页', icon: <HomeIcon />, path: '/' },
    { text: '碳计算', icon: <CalculateIcon />, path: '/calculator' },
    { text: '社区', icon: <GroupIcon />, path: '/community' },
  ];

  const handleLogout = () => {
    logout();
    setUserMenu(null);
  };

  return (
    <AppBar position="sticky" elevation={0} sx={{ bgcolor: 'background.paper' }}>
      <Container maxWidth="lg">
        <Toolbar disableGutters>
          <Typography
            variant="h6"
            component={RouterLink}
            to="/"
            sx={{
              color: 'primary.main',
              textDecoration: 'none',
              fontWeight: 700,
              flexGrow: { xs: 1, md: 0 },
              mr: { md: 4 }
            }}
          >
            EcoTrack
          </Typography>

          {isMobile ? (
            <IconButton color="primary">
              <MenuIcon />
            </IconButton>
          ) : (
            <>
              <Box sx={{ flexGrow: 1, display: 'flex', gap: 2 }}>
                {navItems.map((item) => (
                  <Button
                    key={item.path}
                    component={RouterLink}
                    to={item.path}
                    startIcon={item.icon}
                    sx={{
                      color: 'text.primary',
                      '&:hover': {
                        bgcolor: 'primary.light',
                        color: 'white',
                      },
                    }}
                  >
                    {item.text}
                  </Button>
                ))}
              </Box>
              
              {user ? (
                <>
                  <Avatar
                    onClick={(e) => setUserMenu(e.currentTarget)}
                    sx={{ 
                      cursor: 'pointer',
                      bgcolor: 'primary.main',
                      '&:hover': { bgcolor: 'primary.dark' }
                    }}
                  >
                    {user.username?.[0]?.toUpperCase()}
                  </Avatar>
                  <Menu
                    anchorEl={userMenu}
                    open={Boolean(userMenu)}
                    onClose={() => setUserMenu(null)}
                  >
                    <MenuItem component={RouterLink} to="/profile">
                      <ListItemIcon>
                        <PersonIcon fontSize="small" />
                      </ListItemIcon>
                      个人主页
                    </MenuItem>
                    <MenuItem component={RouterLink} to="/dashboard">
                      <ListItemIcon>
                        <DashboardIcon fontSize="small" />
                      </ListItemIcon>
                      仪表盘
                    </MenuItem>
                    <MenuItem onClick={handleLogout}>
                      <ListItemIcon>
                        <LogoutIcon fontSize="small" />
                      </ListItemIcon>
                      退出登录
                    </MenuItem>
                  </Menu>
                </>
              ) : (
                <Button
                  variant="contained"
                  startIcon={<PersonIcon />}
                  onClick={() => setLoginOpen(true)}
                >
                  登录
                </Button>
              )}
            </>
          )}
        </Toolbar>
      </Container>

      <LoginDialog
        open={loginOpen}
        onClose={() => setLoginOpen(false)}
      />
    </AppBar>
  );
}

export default Navbar; 